BFC 块级格式化上下文

BFC（Block Formatting Context）是页面中的一个独立渲染区域，内部元素与外部隔离，互不影响。

什么是 BFC

BFC 是一个独立的布局环境，其中的元素按照块级格式化规则排列，不会影响外部元素。

触发 BFC 的条件

/* 常用触发方式 */
.bfc-float {
  float: left;
}

.bfc-overflow {
  overflow: hidden;
}

.bfc-display {
  display: flow-root; /* 最推荐，无副作用 */
}

BFC 的特性

1. 内部元素垂直排列

.bfc-container {
  display: flow-root;
}

2. BFC 区域不与浮动元素重叠

.sidebar {
  float: left;
  width: 200px;
  height: 100px;
}

.main-content {
  display: flow-root; /* BFC 不会与浮动元素重叠 */
}

3. BFC 可以包含浮动元素（清除浮动）

.parent {
  display: flow-root; /* 解决子元素浮动导致父元素高度塌陷 */
}

.float-child {
  float: left;
}

4. BFC 阻止外边距合并

.container {
  display: flow-root; /* 阻止内部元素与外部元素的外边距合并 */
}

常见应用场景

清除浮动

.clearfix {
  display: flow-root;
}

阻止外边距合并

.wrapper {
  display: flow-root;
}

.wrapper p {
  margin: 20px 0;
}

实现两栏布局

.left {
  float: left;
  width: 200px;
}

.right {
  display: flow-root; /* 自适应剩余宽度，不与浮动元素重叠 */
}

要点总结

• BFC 是独立的渲染区域，内外元素互不影响
• 推荐使用 display: flow-root 创建 BFC，无副作用
• BFC 主要用于：清除浮动、阻止外边距合并、防止浮动元素重叠
• 理解 BFC 有助于解决常见布局问题